﻿@page "/docs/components/breadcrumb"

<Seo Canonical="/docs/components/breadcrumb" Title="Blazorise Breadcrumb component" Description="Learn to use and work with the Blazorise Breadcrumbs component, which indicates the current page's location." />

<DocsPageTitle Path="Components/Breadcrumb">
    Blazorise Breadcrumb component
</DocsPageTitle>

<DocsPageLead>
    A simple breadcrumb component to improve your navigation experience.
</DocsPageLead>

<DocsPageParagraph>
    Breadcrumbs are used to indicate the current page's location.
</DocsPageParagraph>

<DocsPageParagraph>
    You can inform the current page using the <Code>Active</Code> attribute in a <Code>BreadcrumbItem</Code>.
</DocsPageParagraph>

<UnorderedList>
    <UnorderedListItem>
        <Paragraph>
            <Code Tag>Breadcrumb</Code> the main container.
        </Paragraph>
        <UnorderedList>
            <UnorderedListItem>
                <Paragraph>
                    <Code Tag>BreadcrumbItem</Code> the breadcrumb item, which can be active or not.
                </Paragraph>
                <UnorderedList>
                    <UnorderedListItem>
                        <Paragraph>
                            <Code Tag>BreadcrumbLink</Code> the link to the destination page.
                        </Paragraph>
                    </UnorderedListItem>
                </UnorderedList>
            </UnorderedListItem>
        </UnorderedList>
    </UnorderedListItem>
</UnorderedList>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Manual mode">
        This is the default mode. Meaning you need to set <Code>BreadcrumbItem.Active</Code> property implicitly.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined>
        <BreadcrumbManualExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BreadcrumbManualExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Auto mode">
        In this mode breadcrumb items will respond to navigation changes and will be activates automatically.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined>
        <BreadcrumbAutoExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BreadcrumbAutoExample" />
</DocsPageSection>

<ComponentApiDocs ComponentTypes="[typeof(Breadcrumb), typeof(BreadcrumbItem), typeof(BreadcrumbLink)]" />